<template>
  <div v-if="courseData" class="app-container">
    <div class="video-title">{{ courseData.title }}</div>
    <div class="video-createTime">{{ courseData.createTime }}</div>
    <video :src="courseData.url" controls class="video" />
    <div class="video-content">详情：{{ courseData.content }}</div>

  </div>
</template>
<script>
import { videoInfo } from '@/api/course'
export default {
  name: 'CourseDetail',
  data() {
    return {
      courseId: null, // 课程id
      courseData: null // 课程id
    }
  },
  created() {
    // 获取传过来的参数
    const params = this.$route.params
    // console.log('params:', params)
    this.courseId = params.id
    this.getCourseData()
  },
  methods: {
    getCourseData() {
      videoInfo({ id: this.courseId }).then((res) => {
        res.data.url = process.env.VUE_APP_BASE_IMG_URL + res.data.url
        this.courseData = res.data
        console.log(res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.video-title {
  color: #303133;
  font-size: 20px;
  font-weight: 700;
}

.video-createTime {
  color: #909399;
  font-size: 14px;
  padding: 10px 0px;
}

.video {
  width: 100%;
  height: 500px;
  background-color: #000000;
}

.video-content {
  color: #606266;
  font-size: 16px;
  padding: 10px 0px;
}</style>
